import React, { useState } from 'react';
import styles from './Settings.module.css';

const Settings = () => {
  const [settings, setSettings] = useState({
    siteName: '后台管理系统',
    siteDescription: '这是一个功能强大的后台管理系统',
    adminEmail: 'admin@example.com',
    itemsPerPage: 10,
    enableNotifications: true,
    enableDarkMode: false,
    maintenanceMode: false
  });

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setSettings(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在实际应用中，这里会调用API保存设置
    alert('设置已保存');
  };

  const handleReset = () => {
    setSettings({
      siteName: '后台管理系统',
      siteDescription: '这是一个功能强大的后台管理系统',
      adminEmail: 'admin@example.com',
      itemsPerPage: 10,
      enableNotifications: true,
      enableDarkMode: false,
      maintenanceMode: false
    });
    alert('设置已重置');
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>系统设置</h1>
      
      <div className={styles.card}>
        <h2>基本设置</h2>
        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>网站名称:</label>
            <input
              type="text"
              name="siteName"
              value={settings.siteName}
              onChange={handleInputChange}
              className={styles.formInput}
            />
          </div>
          
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>网站描述:</label>
            <textarea
              name="siteDescription"
              value={settings.siteDescription}
              onChange={handleInputChange}
              className={styles.formTextarea}
              rows="3"
            />
          </div>
          
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>管理员邮箱:</label>
            <input
              type="email"
              name="adminEmail"
              value={settings.adminEmail}
              onChange={handleInputChange}
              className={styles.formInput}
            />
          </div>
          
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>每页显示项目数:</label>
            <select
              name="itemsPerPage"
              value={settings.itemsPerPage}
              onChange={handleInputChange}
              className={styles.formSelect}
            >
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
            </select>
          </div>
          
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>功能设置:</label>
            <div className={styles.checkboxGroup}>
              <label className={styles.checkboxLabel}>
                <input
                  type="checkbox"
                  name="enableNotifications"
                  checked={settings.enableNotifications}
                  onChange={handleInputChange}
                  className={styles.checkbox}
                />
                启用通知
              </label>
              
              <label className={styles.checkboxLabel}>
                <input
                  type="checkbox"
                  name="enableDarkMode"
                  checked={settings.enableDarkMode}
                  onChange={handleInputChange}
                  className={styles.checkbox}
                />
                启用深色模式
              </label>
              
              <label className={styles.checkboxLabel}>
                <input
                  type="checkbox"
                  name="maintenanceMode"
                  checked={settings.maintenanceMode}
                  onChange={handleInputChange}
                  className={styles.checkbox}
                />
                维护模式
              </label>
            </div>
          </div>
          
          <div className={styles.buttonGroup}>
            <button type="submit" className={styles.submitButton}>保存设置</button>
            <button type="button" onClick={handleReset} className={styles.resetButton}>重置设置</button>
          </div>
        </form>
      </div>
      
      <div className={styles.card}>
        <h2>系统信息</h2>
        <div className={styles.infoGrid}>
          <div className={styles.infoItem}>
            <h3>系统版本</h3>
            <p>v1.0.0</p>
          </div>
          
          <div className={styles.infoItem}>
            <h3>React版本</h3>
            <p>19.2.0</p>
          </div>
          
          <div className={styles.infoItem}>
            <h3>最后更新</h3>
            <p>2023-10-20</p>
          </div>
          
          <div className={styles.infoItem}>
            <h3>服务器状态</h3>
            <p className={styles.statusOnline}>在线</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;